<!--黑名单车辆信息-->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      :isNeedTree="true"
      :isCheckbox="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:SAVE')"
              @click.prevent="createTicket()"
            >新建</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:EMERGENCY_CONFIG:LIST')"
              @click.prevent="openEmergencySetup()"
            >告警设置</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
                <span
                  v-else-if="'parkList' == props.prop"
                  @click.prevent="supportParkShowModal(scope.row)"
                  class="row-href cursor"
                >查看({{ scope.row.parkNum }})</span>
                <span
                  v-else-if="'specialCarTypeConfigName' == props.prop"
                  class="row-href cursor"
                  @click.prevent="checkVisitorType(scope.row)"
                >{{ scope.row[props.prop] }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="120"
              class-name="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-edit"
                  class="ake-icon-font"
                  title="编辑"
                  :disabled="scope.row.sysVersion <= 2.3"
                  v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:EDIT')"
                  @click="modifyBlack(scope.row)"
                  plain
                ></el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-synchronize"
                  class="ake-icon-font"
                  title="同步详情"
                  v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:LIST')"
                  @click="syncDetail(scope.row.id, true)"
                  plain
                  :disabled="scope.row.noSendStatus"
                ></el-button>
                <el-button
                  size="small"
                  type="danger"
                  icon="icon-delete"
                  class="ake-icon-font"
                  title="删除"
                  v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:DEL')"
                  @click="delBlack(scope.row)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <!-- 告警设置 -->
    <el-dialog
      title="告警设置-黑名单"
      :visible.sync="dialogVisibleForEmergency"
      width="320px"
      class="zb-dialog"
    >
      <div class="parkinglot-showInfo-content main-content-box" style="padding: 0 30px">
        <div class="title-chunk" style="display: flex">
          <h3>告警提醒</h3>
          <el-tooltip class="item" effect="dark" content="告警提醒通过公众号推送到管理员" placement="right">
            <i class="el-icon-question" style="margin-left: 10px;font-size: 20px;"></i>
          </el-tooltip>
        </div>
        <div class="switch-btn">
          <span>进场告警</span>
          <el-switch v-model="cardNoIn" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <div class="switch-btn">
          <span>出场告警</span>
          <el-switch v-model="cardNoOut" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <h3 style="margin-top:40px;">POS机管理员告警提醒</h3>
        <p class="red-tip">管理员需登录才能收到告警提醒</p>
        <div class="switch-btn">
          <span>进场告警</span>
          <el-switch v-model="pos_cardNoIn" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
        <div class="switch-btn">
          <span>出场告警</span>
          <el-switch v-model="pos_cardNoOut" active-color="#548cd1" inactive-color="#DEDEDE"></el-switch>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:EMERGENCY_CONFIG:EDIT')"
          type="primary"
          size="medium"
          @click="saveEmergencySetup()"
        >保 存</el-button>
        <el-button size="medium" plain @click="dialogVisibleForEmergency = false">取 消</el-button>
      </span>
    </el-dialog>

    <!--至少选择一项  modal-->
    <basic-modal ref="voidTipModal" bodyTxt="请至少选择一项">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('voidTipModal')">关闭</button>
      </div>
    </basic-modal>

    <!--新增or编辑黑名单车-->
    <basic-modal ref="createBlackModal" width="640" customeClass="ticket-row-modal" static="true">
      <h3 slot="title">{{ traderstatus == 'new' ? '新增黑名单' : '编辑黑名单' }}</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          :model="mouthTicketData.dataSave"
          ref="blackForm"
          label-position="left"
          :rules="rules"
          label-width="130px"
          style="width: 500px"
        >
          <el-form-item v-if="actionStatus == 'edit'" label="特殊车辆类型名称" prop>
            <el-input
              v-model="specialCarTypeConfigName"
              :disabled="actionStatus == 'edit'"
              type="text"
            ></el-input>
          </el-form-item>
          <div style="display:flex;" v-else>
            <el-form-item label="特殊车辆类型名称" prop="specialCarTypeConfigId" style="flex:1;">
              <!-- <div class="el-select">
              <div class="el-input el-input--suffix" @click="mouthTicketData.isShowSpecialCarType = !mouthTicketData.isShowSpecialCarType">
                <input type="text" readonly="readonly" autocomplete="off" placeholder="特殊车辆类型名称" class="el-input__inner" v-model="specialCarTypeConfigName" />
                <span class="el-input__suffix">
                  <span class="el-input__suffix-inner">
                    <i class="rotate el-input__icon el-icon-arrow-up" :class="{ rotate180: mouthTicketData.isShowSpecialCarType }"></i>
                  </span>
                </span>
              </div>
            </div>
            <div id="addVisitorType" class="el-select-dropdown" v-show="mouthTicketData.isShowSpecialCarType">
              <ul class="dropdown-menu">
                <li v-for="(item, index) in specialCarTypeConfigList" @click="configChange(item)">{{ item.name }}</li>
              </ul>
              <div class="add-btn" @click="addSpecialCarType">
                <img src="../../assets/img/ic_subscribe_add.svg" alt="" />
                <span style="color: #5995D8;">添加访客类型</span>
              </div>
              </div>-->
              <el-select
                v-model="mouthTicketData.dataSave.specialCarTypeConfigId"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in specialCarTypeConfigList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <div
              class="ake_btn ake_btn_text"
              style="margin-left:10px;margin-right:10px;"
              @click="checkVisitorType"
              :disabled="!mouthTicketData.dataSave.specialCarTypeConfigId"
            >查看</div>
            <el-button type="primary" class="ake_btn ake_btn_text" @click="addSpecialCarType">去创建</el-button>
          </div>

          <el-form-item label="车牌号码" prop="carLicenseNumber">
            <el-input placeholder="请输入车牌号码" v-model="mouthTicketData.dataSave.carLicenseNumber"></el-input>
          </el-form-item>
          <el-form-item label="车主姓名" prop="owner">
            <el-input placeholder="请输入车主姓名" v-model="mouthTicketData.dataSave.owner"></el-input>
          </el-form-item>
          <el-form-item label="黑名单原因" prop="reason">
            <el-input
              type="textarea"
              placeholder="请输入黑名单原因"
              v-model="mouthTicketData.dataSave.reason"
            ></el-input>
          </el-form-item>
          <el-form-item prop="blacklistForeverFlag" label="黑名单生效期">
            <el-select
              @change="showBlack($event)"
              v-model="mouthTicketData.dataSave.blacklistForeverFlag"
              popper-class="trader-select"
            >
              <el-option label="永久" value="OPEN"></el-option>
              <el-option label="自然月" value="OTHER"></el-option>
              <el-option label="自定义" value="CLOSE"></el-option>
            </el-select>
          </el-form-item>

          <!--自然月 start -->
          <el-form-item label="有效期" v-if="showBlackTime == 'OTHER'">
            <div class="col-sm-6" style="display:flex;flex-wrap: wrap;width:100%">
              <div class="col-sm-6" style="width:100%">
                <table class="dateBox" style="width:100%">
                  <tr>
                    <td style="text-align:left">
                      <span class="triangle_border_left" @click="cut"></span>
                    </td>
                    <td colspan="2" style="text-align:center;font-weight:bold;padding:10px;">
                      <span>{{ naturalMonthData.year }}</span>
                    </td>
                    <td style="text-align:right">
                      <span class="triangle_border_right" @click="add"></span>
                    </td>
                  </tr>
                  <tr v-for="(item, tt) in naturalMonthData.month" :key="tt">
                    <td
                      v-for="(m, index) in item"
                      :key="m"
                      @click="getMonth(index, tt)"
                      class="month"
                      :class="{
                        NO:
                          (naturalMonthData.year == yearN && tt * 4 + index < monthN - 1) ||
                          !(
                            monthShow.indexOf(
                              naturalMonthData.year +
                                '-' +
                                (tt * 4 + index + 1 > 9 ? tt * 4 + index + 1 : '0' + (tt * 4 + index + 1))
                            ) == -1
                          ) ||
                          !(
                            alreadySelect.indexOf(
                              naturalMonthData.year +
                                '-' +
                                (tt * 4 + index + 1 > 9 ? tt * 4 + index + 1 : '0' + (tt * 4 + index + 1))
                            ) == -1
                          ),
                        YES:
                          monthShow.indexOf(
                            naturalMonthData.year +
                              '-' +
                              (tt * 4 + index + 1 > 9 ? tt * 4 + index + 1 : '0' + (tt * 4 + index + 1))
                          ) > -1
                      }"
                    >{{ m }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </el-form-item>
          <!--自然月 end -->

          <el-form-item label prop="availTimeFromTo" v-if="showBlackTime == 'CLOSE'">
            <el-date-picker
              v-model="mouthTicketData.dataSave.availTimeFromTo"
              type="datetimerange"
              align="right"
              placeholder="请选择黑名单生效期"
              :editable="false"
              :clearable="false"
              :picker-options="afterPickerOptions"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="备注">
            <div class="show-rule-detail-icon" @click="remarkChunkShow = !remarkChunkShow">
              <i class="el-icon-arrow-down" :class="{ rotate180: remarkChunkShow }"></i>
            </div>
          </el-form-item>
          <div class="remark-chunk" v-show="remarkChunkShow">
            <el-form-item label="备注1" prop="remark1">
              <el-input
                type="textarea"
                placeholder="请输入备注1"
                :rows="3"
                v-model="mouthTicketData.dataSave.remark1"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注2" prop="remark2">
              <el-input
                type="textarea"
                placeholder="请输入备注2"
                :rows="3"
                v-model="mouthTicketData.dataSave.remark2"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submitForm('blackForm')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('createBlackModal')">取消</button>
      </div>
    </basic-modal>

    <!--黑名单详情-->
    <basic-modal
      ref="supportParkModal"
      width="580"
      customeClass="surpport-park-modal"
      static="true"
    >
      <h3 slot="title">详情</h3>
      <div class="modal-body" slot="modal-body">
        <multi-fun-table :theads-info="supportPark.theadsInfo" :tbodys-info="supportParkList">
          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('supportParkModal')">关闭</button>
      </div>
    </basic-modal>

    <!--选择停车场树-->
    <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">适用停车场</h3>
      <div class="modal-body" slot="modal-body" style="padding:30px 50px;">
        <!-- <el-input placeholder="请输入搜索关键字" style="width:280px;" v-model="itemsKeyName"></el-input>
        <el-button size="small" type="primary" @click="searchItems('ParkTree')" class="select-park-btn ake_btn_text">搜索</el-button>-->

        <div class="common-tree modal-tree-box">
          <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
        </div>

        <label>
          <span>共{{ itemsNum }}项</span>
        </label>
      </div>
      <div slot="modal-footer"></div>
    </basic-modal>

    <!--同步详情-->
    <basic-modal ref="syncDetailModal" width="900" customeClass="sync-detail-modal" static="true">
      <h3 slot="title">同步详情</h3>
      <div class="modal-body" slot="modal-body">
        <multi-fun-table
          :theads-info="syncDetailModal.theadsInfo"
          :tbodys-info="syncDetailModal.syncDetailList"
        >
          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'sendStatus' == props.prop">{{ scope.row.sendStatus | sendStatus }}</span>
                <span v-else-if="'operate' == props.prop">
                  <el-button
                    v-if="isPermmited('PARK_CAR:PARK_BLACKLIST:EMERGENCY_CONFIG:RESYN')"
                    size="small"
                    type="primary"
                    class="ake_btn_text"
                    @click="reSync(scope.row)"
                  >重新同步</el-button>
                </span>
                <span :title="scope.row[props.prop]" v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('syncDetailModal')">关闭</button>
      </div>
    </basic-modal>

    <!-- 特殊车辆类型组件 -->
    <SpecialCarTypeCom ref="specialCarTypeCom" @getVisitorConfigList="getVisitorConfigList"></SpecialCarTypeCom>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";
import SpecialCarTypeCom from "../operation/components/specialCarTypeCom";

// 引进vue的js
import park_blacklist from "./js/park_blacklist.js";
export default {
  name: "parkBlacklist",
  mixins: [common, stardardList, invokeModal, park_blacklist],
  components: {
    BigPicModal,
    SpecialCarTypeCom
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      fixedCols: 3,
      total: 0,
      paramName: "parkIds",
      traderstatus: "new",
      searchList: [
        {
          type: "text",
          isShow: false,
          name: "carLicenseNumber",
          text: "车牌号",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "owner",
          text: "车主姓名",
          value: ""
        }
      ],
      theadsInfo: [
        {
          index: 1,
          isShow: false,
          prop: "carLicenseNumber",
          text: "车牌号",
          sortable: true,
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "owner",
          text: "车主姓名",
          sortable: true,
          minWidth: 50
        },
        {
          index: 3,
          isShow: false,
          prop: "specialCarTypeConfigName",
          text: "黑名单类型",
          sortable: true,
          minWidth: 50
        },
        {
          index: 4,
          isShow: false,
          prop: "timePeriod",
          text: "有效期",
          sortable: true,
          minWidth: 130
        },
        {
          index: 5,
          isShow: false,
          prop: "reason",
          text: "黑名单原因",
          sortable: true,
          minWidth: 70
        },
        {
          index: 6,
          isShow: false,
          prop: "parkList",
          text: "黑名单详情",
          sortable: true,
          minWidth: 40
        },
        {
          index: 7,
          isShow: false,
          prop: "remark1",
          text: "备注1",
          sortable: true,
          minWidth: 50
        },
        {
          index: 8,
          isShow: false,
          prop: "remark2",
          text: "备注2",
          sortable: true,
          minWidth: 50,
          initHidden: true
        },
        {
          index: 9,
          isShow: false,
          prop: "operateBy",
          text: "最近操作员",
          sortable: true,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "operateTime",
          text: "最近操作时间",
          sortable: true,
          minWidth: 80,
          initHidden: true
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style>
/*滚动条样式*/
.dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.dropdown-menu::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>

<style lang="less" scoped>
.main-content-box {
  .red-tip {
    font-size: 12px;
    color: #de0000;
    margin-top: 10px;
  }

  h3 {
    font-size: 14px;
    color: #474747;
  }

  .switch-btn {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;

    > span {
      font-size: 14px;
      color: #666666;
    }
  }
}

.title-chunk {
  position: relative;
}

.tipsBox {
  display: inline-block;
  position: absolute;
  margin-left: 10px;

  &:hover {
    .tips {
      display: block;
    }
  }

  .tips {
    display: none;
    position: absolute;
    z-index: 12;
    padding: 10px;
    background: rgba(50, 52, 54, 0.8);
    border-radius: 5px;
    line-height: 15px;
    width: 150px;
    height: max-content;

    &.left {
      left: 0;
    }

    &.right {
      right: 0;
    }

    &.bottom {
      bottom: 35px;
    }

    p {
      color: #fff;
      text-align: justify;
      font-size: 12px;
    }
  }
}

.el-icon-question {
  &:before {
    color: #bbbbbb;
    font-size: 18px;
  }
}

.rotate {
  &.rotate180 {
    transform: rotate(-180deg);
  }
}

.show-rule-detail-icon {
  //备注块显示与隐藏
  height: 100%;
  width: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  display: inline-block;

  .el-icon-arrow-down {
    font-size: 18px;
    color: #b0b0b0;
    transition: transform 0.25s ease-in;
    transform-origin: center center;

    &.rotate180 {
      transform: rotate(-180deg);
    }
  }
}

.ticket-row-modal {
  .showMonth {
    margin-right: 15px;
    color: white;
    background-color: #999;
    padding: 0 5px;
    margin-bottom: 5px;
  }

  .showMonth span {
    margin-left: 5px;
    cursor: pointer;
  }

  .dateBox {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*向左*/
    /*向右*/
  }

  .dateBox .month {
    width: 65px;
    height: 45px;
    border: 1px #ccc solid;
    padding: 10px;
    text-align: center;
  }

  .dateBox .month:hover {
    background-color: lighten(#5995d8, 35%);
    cursor: pointer;
  }

  .dateBox .month.NO {
    background-color: #f1f1f1;
    color: #666;
  }

  .dateBox .month.YES {
    background-color: #5995d8;
    color: #fff;
  }

  .dateBox .triangle_border_left {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-top: 8px solid transparent;
    border-right: 10px solid #a5a5a5;
    border-bottom: 8px solid transparent;
    cursor: pointer;
  }

  .dateBox .triangle_border_right {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-top: 8px solid transparent;
    border-left: 10px solid #a5a5a5;
    border-bottom: 8px solid transparent;
    cursor: pointer;
  }
}
</style>
